<script setup lang='ts'>
import { useTokenStore } from '@/stores/token'

const tokenStore = useTokenStore()

interface UploadModelResult {
    message: string
}

//用于上传模型结果的对象
const uploadModelResult = ref<UploadModelResult>(
    {
       message: 'default'
    }
)

//上传成功的回调
const handleUploadSoundSuccess = (response, file, fileList) => {

    //识别成功，将识别结果赋值给recognitionResult
    if(response.code == 200) {

        ElMessage.success('上传成功');
        uploadModelResult.value = response.data


    }else{

        ElMessage.error(response.msg ? response.msg : '上传失败');

    }
    

}

//跳转到对应鸟类页面

</script>

<template>
    <div class="container">
        <el-upload 
        class="upload-demo" drag 
        action="/api/upload-model"
        :limit="1"
        :headers="{'token': tokenStore.token}"
        :on-success="handleUploadSoundSuccess"
            multiple>
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
                Drop file here or <em>click to upload</em>
            </div>
            <template #tip>
                <div class="el-upload__tip">
                    上传并替换当前的模型文件（文件大小不超过50MB）
                </div>
            </template>
        </el-upload>
        <div class="result" v-if=" uploadModelResult.message != 'default' ">
            <div>{{  uploadModelResult.message }}</div>
        </div>
    </div>
</template>

<style scoped>
.container {
    display: flex;
    /* justify-content: center; */
    align-items: center;
    margin: 10px;
    padding: 10px;
    flex-direction: column;
}
.result {
    margin: 10px;
}
.result-btn {
    margin: 10px;
}
</style>